<style lang="less" scoped>
.ellipse {
  display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.showMore {
  text-align: center;
}
</style>

<template>
    <div>
        <div :class="{ellipse:showMore}" v-html="str||''"></div>
        <div class="showMore" @click="changeShow">
            <i :class="['iconfont',arrow]"></i>
        </div>
    </div>
</template>
<script>
export default {
  props: ['str'],
  data() {
    return {
      showMore: true
    };
  },
  computed: {
    arrow() {
      return this.showMore ? 'icon-tubiaozhizuo-' : 'icon-shangjiantou';
    }
  },
  methods: {
    changeShow() {
      this.showMore = !this.showMore;
    }
  }
};
</script>
